<template>
	<view class="logincontainer">
		<apptop :toplevel="1"></apptop>
		<view class="inptt">
			请先登录
		</view>
		<view class="inp">
			<input type="number" v-model="account" placeholder="帐号" />
		</view>
		<view class="inp">
			<input type="text" password="true" v-model="password" placeholder="密码" />
		</view>
		<view class="inp">
			<checkbox-group @change="rememberChange">
				<checkbox :checked="remember" borderColor="#006d6d" style="transform:scale(0.7)" /> 记住帐号
			</checkbox-group>
		</view>
		<view class="inp">
			<button class="logbtn" @click="aclogin">
				<text class="iconfont">&#xe691;</text>
				<text style="margin-left: 10rpx;">登录</text>
			</button>
		</view>
		<view class="wx">
			<view class="wxlogin" @click="wxlogin">
				<image src="https://yemuadmin.baicaigongyu.com/public/uploads/logo/wechat.webp" mode="widthFix"></image>
				<view class="text-center f20">微信登录</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState,mapMutations } from 'vuex';
	
	export default {
		data() {
			return {
				account:'',
				password:'',
				remember:false,
			};
		},
		computed:{
			...mapState(['userid','hasLogin'])
		},
		onLoad() {
			const account = uni.getStorageSync("account");
			const remember = uni.getStorageSync("remember");
			if (account || remember) {
				this.account = account;
				this.remember = remember;
			}
		},
		methods:{
			...mapMutations(['login','loginOut']),
			rememberChange(){
				this.remember = !this.remember
			},
			async aclogin(){
				if(this.account.length==0 || this.password.length == 0){
					uni.showToast({
						title:"帐号密码必填",
						icon:'error'
					})
					return
				}
				if(this.remember){
					uni.setStorageSync("account", this.account);
					uni.setStorageSync("remember", this.remember);
				} else {
					  // 销毁缓存中的账号
					  uni.removeStorageSync("account");
					  uni.removeStorageSync("remember");
				}
				let result = await this.$http({
					url:"yemuapp/login",
					data:{
						account:this.account,
						password:this.password
					},
					method:'POST'
				})
				if(result.errcode == 0){
					this.login(result.userinfo)
					uni.reLaunch({
					    url: '/pages/mine/mine',
					    fail() {
					        console.log('跳转失败')
					    },
					})
				}else{
					uni.showToast({
						title:result.msg,
						icon:'error'
					})
				}
			},
			// 微信登录
			wxlogin(){
				//获取服务商信息判断手机端是否安装了app
				uni.getProvider({
					service: 'oauth',// oauth  代表授权登录
					success: function (res) {
						// 登录
						uni.login({
							// 表示授权方式  如果不设置则弹出登录列表选择界面
							provider: 'weixin',
							success: function (loginRes) {
								// 获取用户信息
								uni.getUserInfo({
								provider: 'weixin',
								success: function(infoRes) {
										console.log('-------获取微信用户所有-----')
										console.log(JSON.stringify(infoRes.userInfo));
										const info = infoRes.userInfo;
										console.log('info.openId:',info.openId); 
									}
								});
							}
						});
					}
				});
			},
		}
	}
</script>

<style lang="less">
	page{
		padding-top: 200rpx;
	}
	.logincontainer{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 80%;
		margin: 0 auto;
		background-color: #e2ecf6;
		padding: 40rpx 0 20rpx;
		border-radius: 30rpx;
	}
	.inptt{
		text-align: center;
		font-weight: bold;
		margin-bottom: 20rpx;
	}
	.inp{
		margin: 20rpx;
		width: 80%;
		input{
			border: 1rpx solid #0b0863;
			border-radius: 6rpx;
			text-align: center;
			height: 60rpx;
			line-height: 60rpx;
		}
		.logbtn{
			background-color: #0b0863;
			border: none;
			color: #fff;
		}
	}
	.wx{
		width: calc(100% - 40rpx);
		position: fixed;
		bottom: 40rpx;
		.wxlogin{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			image{
				width: 68rpx;
				height: 55rpx;
				display: block;
			}
		}
	}
</style>
